<template>
    <div class="bgbox">
        <div class="big">
            <div class="smallleft">
                <img src="../assets/images/login-left.png">
            </div>
            <div class="smallright">
                <div class="log">
                    <div class="log_left" @click="switchLoginType('sms')" :class="{active: loginType ==='sms'}">
                        <span class="sms-login-text">短信登录</span>
                    </div>
                    <div class="log_right" @click="switchLoginType('password')" :class="{active: loginType === 'password'}">
                        <span class="password-login-text">密码登录</span>
                    </div>
                </div>
                <div v-if="loginType ==='sms'" class="log_top">
                    <input type="text" placeholder="手机号">
                </div>
                <div v-if="loginType ==='sms'" class="log_top2">
                    <input type="text" placeholder="验证码">
                    <div class="yzm">
                        发送验证码
                    </div>
                </div>
                <div v-else class="log_top">
                    <input type="text" placeholder="账号">
                </div>
                <div v-if="loginType === 'password'" class="log_down">
                    <input type="text" placeholder="密码">
                </div>
                <div class="btn">
                    <div class="dl">登录</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const loginType = ref('sms');

function adapter() {
    //获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
    const dpWidth = document.documentElement.clientWidth;
    //计算根字体大小
    const rootFonstSize = (dpWidth * 100) / 1125;
    //设置根字体大小
    document.documentElement.style.fontSize = rootFonstSize + 'px';
}
adapter();
window.onresize = adapter;

function switchLoginType(type: string) {
    loginType.value = type;
}

</script>

<style scoped lang='less'>
@import "@/assets/css/login.css";
</style>